<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城-小懒猫</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
	<div class="header">
		<style>
			.header .header_main{
				height:40px;
				line-height: 40px;
			}
			.header .header_main span{
				font-size: 14px;
				padding: 0px 6px;
				color: #424242;
			}
			.header .header_main a{
				font-size: 10px;
				color: #B0B0B0;
			}
			.nav_main{
				display: flex;
			}
			.nav_main a{
				color: #B0B0B0;
			}
			.login_msg{
				display: flex;
				padding-right: 30px;
			}
			.login_msg a{
				color: #B0B0B0;
			}
			.nav_right{
				display: flex;
			}
			.shop_car{
				width: 120px;
				height: 40px;
				text-align: center;
				background: #424242;
			}
			.shop_car a{
				font-size: 14px;
				color: #B0B0B0;
			}
		</style>
		<div class="header_main w1226 marginAuto">
			
			<div class="nav_left fl">
				<ul class="nav_main">
					<li>
						<a href="javascript:void(0);">小米官网</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">小米商城</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">小米澎湃OS
					</a>
					</li>
					<li>
						<a href="javascript:void(0);">小米汽车</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">云服务</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">IoT</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">有品</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">小爱开放平台</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">资质证照</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">协议规则</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">下载app</a></li>
						<span>|</span>
					<li>
						<a href="javascript:void(0);">Select Location</a>
					</li>
				</ul>
			</div>
			<div class="nav_right fr">
				<ul class="login_msg">
					<li>
						<a href="javascript:void(0);">登录</a>
						<span>|</span>
					</li>
					<li>
						<a href="javascript:void(0);">注册</a>
						<span>|</span>
					</li>
					<li><a href="javascript:void(0);">消息通知</a></li>
				</ul>
				<div class="shop_car">
					<a href="javascript:void(0);">购物车(0)</a>
				</div>
			</div>
		</div>
	</div>
	<div class="content_wrap">
		<div class="cnt_logo w1226 marginAuto">
			<div class="logo_wrap">
				<h class="mi_logo"><a href="javascript:void(0);">小米</a></h>
				<ul class="item_list">
					<li><a href="javascript:void(0);">Xiaomi手机</a></li>
					<li><a href="javascript:void(0);">Redmi手机</a></li>
					<li><a href="javascript:void(0);">电视</a></li>
					<li><a href="javascript:void(0);">笔记本</a></li>
					<li><a href="javascript:void(0);">平板</a></li>
					<li><a href="javascript:void(0);">家电路由器</a></li>
					<li><a href="javascript:void(0);">路由器</a></li>
					<li><a href="javascript:void(0);">服务中心</a></li>
					<li><a href="javascript:void(0);">社区</a></li>
				</ul>
				<input type="text" placeholder="小米手机" class="input_search">
			</div>
		</div>
		<div class="cnt_banner w1226 marginAuto">

			<div class="banner_wrap">
				<ul class="banner_wrap_main">
					<li style="display:block"><img src="img/02.webp"/></li>
					<li><img src="img/banner.webp"/></li>
					<li><img src="img/03.webp"/></li>
					<li><img src="img/01.webp"/></li>
					<li><img src="img/05.png"/></li>
				</ul>
			</div>

				<div class="li_active">
					<ul class="icon_dot">
						<li class="img_active">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
				</div>
			<div class="banner_nav"></div>
		</div>
		<div class="cnt_infowrap w1226 marginAuto"></div>
	</div>

	<!-- 底部售后服务 -->
	<div class="footer_main_service">
		<div class="service_container w1226 marginAuto">
			<dl class="col_link">
				<dt>选购指南</dt>
				<dd>手机</dd>
				<dd>电视</dd>
				<dd>笔记本</dd>
				<dd>平板</dd>
				<dd>穿戴</dd>
				<dd>耳机</dd>
				<dd>家电</dd>
				<dd>路由器</dd>
				<dd>音箱</dd>
				<dd>配件</dd>
			</dl>
			<dl class="col_link">
				<dt>服务中心</dt>
				<dd>申请售后</dd>
				<dd>售后政策</dd>
				<dd>维修服务价格</dd>
				<dd>订单查询</dd>
				<dd>以旧换新</dd>
				<dd>保障服务</dd>
			</dl>
			<dl class="col_link">
				<dt>线下门店</dt>
				<dd>小米之家</dd>
				<dd>服务网点</dd>
				<dd>授权体验店/专区</dd>
			</dl>
			<dl class="col_link">
				<dt>关于小米</dt>
				<dd>了解小米</dd>
				<dd>加入小米</dd>
				<dd>投资者关系</dd>
				<dd>可持续发展</dd>
				<dd>廉洁举报</dd>
			</dl>
			<dl class="col_link">
				<dt>关于我们</dt>
				<dd>新浪微博</dd>
				<dd>官方微信</dd>
				<dd>联系我们</dd>
				<dd>公益基金会</dd>
			</dl>
			<div class="dot"></div>
			<div class="service_phone">
				<div class="service_wrap">
					<p class="ic_phone">400-100-5678</p>
					<span class="ic_time">8:00-18:00 (仅收市话费)</span>
					<a href="javascript:void(0);" class="ic_btn">人工客服</a>
				</div>
				<div class="service_wrap">
					<p class="ic_phone">400-180-8888</p>
					<span class="ic_time">8:00-18:00 (仅收市话费)</span>
					<a href="javascript:void(0);" class="ic_btn">人工客服</a>
				</div>
			</div>
		</div>
	</div>
	<!--end 底部售后服务-->
	<script type="text/javascript">
		function log(msg){
			return console.log(msg);
		}
		var bannerUlDom = document.querySelector(".banner_wrap_main");
		var bannerLiDoms = bannerUlDom.children;
		var ulDom = document.querySelector(".icon_dot");
		var liDoms = ulDom.children;
		var len = liDoms.length;
		for(var i=0;i<len;i++){
			liDoms[i].cindex = i
			liDoms[i].onclick = function(){
				var imgDom = bannerLiDoms[this.cindex]
				sblings(imgDom,function(){
					this.style.display="none"
				});
				imgDom.style.display="block";
				this.className = "img_active"
				sblings(this,function(){
					this.className = ""
				});
			}
		}

		function sblings(dom,fn){
			var pDom = dom.parentElement;
			var tabArr = [].slice.call(pDom.children);
			tabArr.filter(function(obj){
				if(obj!=dom)fn.call(obj);
			});
		}
	</script>
</body>
</html>